"use client"

import { TabsDemo } from "@/components/Tabs";
import { Button } from "@/components/ui/button";
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { getDenoisyData, getDiffData, getSentencesScoreAndId, getSeriesData } from "@/utils";
import { zodResolver } from "@hookform/resolvers/zod";
import { useRequest } from "ahooks";
import React, { useState } from "react";
import { useForm } from "react-hook-form";
import { z } from "zod";

interface IProps {
  name?: string
}

const fileUploadSchema = z.object({
  file: z.instanceof(FileList).refine((file) => file?.length == 1, 'File is required.')
})


interface fixType {
  date?: any
}


const DataPreprocessingPage: React.FC<IProps> = (props) => {
  const [seriesData, setSeriesData] = useState<fixType>();
  const [diffData, setDiffData] = useState();
  const [denoisyData, setDenoisyData] = useState();

  const fileUploadForm = useForm<z.infer<typeof fileUploadSchema>>({
    resolver: zodResolver(fileUploadSchema),
  });

  const fileRef = fileUploadForm.register("file");

  const { loading: isSeriesLoading, run: runSeriesData } = useRequest((formData): any => {
    return getSeriesData(formData)
  }, {
    manual: true,
    onSuccess: (res: any) => {
      setSeriesData(res)
    }
  })

  const { loading: isDiffDataLoading, run: runDiffData } = useRequest(() => {
    return getDiffData()
  }, {
    manual: true,
    onSuccess: (res: any) => {
      setDiffData(res);
    }
  })

  const { loading: isDenoisyDataLoading, run: runDenoisyData } = useRequest(() => {
    return getDenoisyData()
  }, {
    manual: true,
    onSuccess: (res: any) => {
      setDenoisyData(res);
    }
  })

  async function fileUploadSubmit(values: z.infer<typeof fileUploadSchema>) {
    const form = new FormData();

    form.append('filename', values.file[0]);
    // const info = await axios.post('http://127.0.0.1:5000/test/csv/score', form)
    // console.log('查看info', info);

    runSeriesData(form);
  }

  return (
    <div>
      <Form {...fileUploadForm}>
        <form onSubmit={fileUploadForm.handleSubmit(fileUploadSubmit)} className="space-y-8">
          <FormField
            control={fileUploadForm.control}
            name="file"
            render={({ field }) => (
              <FormItem>
                <FormLabel>请上传csv文件：</FormLabel>
                <FormControl>
                  <Input type="file" placeholder="shadcn" {...fileRef} />
                </FormControl>
                <FormDescription>
                  This is your public display name.
                </FormDescription>
                <FormMessage />
              </FormItem>
            )}
          />
          <Button type="submit" disabled={isSeriesLoading}>提交</Button>
        </form>
      </Form>
      <div>
        {seriesData ? <TabsDemo csvData={seriesData} diffState={false} dateIndex={seriesData.date} /> : null}

        {seriesData ?
          <div>
            <Button className="mx-5 mt-10" onClick={runDiffData} disabled={isDiffDataLoading} >进行数据差分</Button>
            <Button className="mx-5 mt-10" onClick={runDenoisyData} disabled={isDenoisyDataLoading} >数据降噪</Button>
            <a href="" className="bg-zinc-900 inline-block w-36 leading-10 text-gray-100 text-center rounded-xl hover:bg-zinc-800 transition-all duration-200 mx-5 mt-10">下载源文件</a>
          </div> : null}
      </div>
      <div>
        {diffData ? <TabsDemo csvData={diffData} diffState={true} dateIndex={seriesData?.date} /> : null}
        {diffData ?
          <div>
            <a href="" className="bg-zinc-900 inline-block w-36 leading-10 text-gray-100 text-center rounded-xl hover:bg-zinc-800 transition-all duration-200 mx-5 mt-10">下载差分处理文件</a>
          </div> : null}
          {denoisyData ? <TabsDemo csvData={denoisyData} diffState={false} dateIndex={seriesData?.date} /> : null}
          {denoisyData ?
          <div>
            <a href="" className="bg-zinc-900 inline-block w-36 leading-10 text-gray-100 text-center rounded-xl hover:bg-zinc-800 transition-all duration-200 mx-5 mt-10">下载降噪处理文件</a>
          </div> : null}
      </div>
    </div>

  )
}

export default DataPreprocessingPage;